import './App.css';
import React, { useState } from 'react';
import Meals from '@/components/Meals/Meals'
import CartContext from './store/cartContext';
import FilterMeals from "@/components/FilterMeals/FilterMeals";
import Cart from "@/components/Cart/Cart";
// import Backdrop from "@/components/UI/Backdrop/Backdrop";

// 模拟食物数据
const MEALS_DATA = [
  {
    id: '1',
    title: '汉堡包',
    desc: '百分百纯牛肉配搭爽脆酸瓜洋葱粒与美味番茄酱经典滋味让你无法抵挡！',
    price: 12,
    img: '/img/test.png'
  },
  {
    id: '2',
    title: '双层吉士汉堡',
    desc: '百分百纯牛肉与双层香软芝，加上松软面包及美味酱料，诱惑无人能挡！',
    price: 20,
    img: '/img/test.png'
  },
  {
    id: '3',
    title: '巨无霸',
    desc: '两块百分百纯牛肉，搭配生菜、洋葱等新鲜食材，口感丰富，极致美味！',
    price: 24,
    img: '/img/test.png'
  }, {
    id: '4',
    title: '麦辣鸡腿汉堡',
    desc: '金黄脆辣的外皮，鲜嫩幼滑的鸡腿肉，多重滋味，一次打动您挑剔的味蕾！',
    price: 21,
    img: '/img/test.png'
  }, {
    id: '5',
    title: '板烧鸡腿堡',
    desc: '原块去骨鸡排嫩滑多汁，与翠绿新鲜的生菜和香浓烧鸡酱搭配，口感丰富！',
    price: 22,
    img: '/img/test.png'
  }, {
    id: '6',
    title: '麦香鸡',
    desc: '清脆爽口的生菜，金黄酥脆的鸡肉。营养配搭，好滋味的健康选择！',
    price: 14,
    img: '/img/test.png'
  }, {
    id: '7',
    title: '吉士汉堡包',
    desc: '百分百纯牛肉与香软芝士融为一体配合美味番茄醬丰富口感一咬即刻涌现！',
    price: 12,
    img: '/img/test.png'
  }
]

function App() {
  const [redText, setRedText] = useState(true)
  const pStyle = { color: redText ? 'red' : 'blue' }
  const changeColor = () => {
    setRedText(false)
  }

  // 存储食物列表
  const [mealsData, setMealsData] = useState(MEALS_DATA)

  // 存储购物车数据
  const [carData, setCarData] = useState({
    items: [],
    totalAmount: 0,
    totalPrice: 0,
  })
  // 向购物车中添加商品
  const addMeals = (meal) => {
    const newCart = { ...carData }
    if (newCart.items.indexOf(meal) === -1) {
      newCart.items.push(meal)
      meal.amount = 1
    } else {
      // 增加数量
      meal.amount += 1
    }

    // 增加总数
    newCart.totalAmount += 1
    // 价格
    newCart.totalPrice += meal.price

    setCarData(newCart)
  }
  const subMeals = (meal) => {
    const newCart = { ...carData }
    meal.amount -= 1
    if (meal.amount === 0) {
      newCart.items.splice(newCart.items.indexOf(meal), 1)
    }
    newCart.totalAmount -= 1
    newCart.totalPrice -= meal.price
    setCarData(newCart)
  }

  // 过滤函数
  const filterData = (keyword) => {
    const newMealData = MEALS_DATA.filter(item => item.title.indexOf(keyword) !== -1)
    setMealsData(newMealData)
  }

  return (
    // React.Fragment
    // 一个专门作为父容器的组件
    <React.Fragment>
      <div style={{ display: 'none' }}>
        <p style={pStyle}>react</p>
        <button onClick={changeColor}>点击</button>
        <hr></hr>
      </div>

      <FilterMeals onFilter={filterData}></FilterMeals>
      <CartContext.Provider value={{ ...carData, addMeals, subMeals }}>
        <Meals mealsData={mealsData}></Meals>
        <Cart></Cart>
        {/* <Backdrop></Backdrop> */}
      </CartContext.Provider>


    </React.Fragment>
  );
}

export default App;
